<template>
	<view class="">
		<view class="tn-flex tn-flex-row-between tn-margin-top">
			<view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
				园区服务
			</view>
			<view class="justify-content-item tn-margin tn-text-lg tn-color-grey" @click="tn('/pages/policy/index')">
				<text class="tn-padding-xs">全部</text>
				<text class="tn-icon-topics"></text>
			</view>
		</view>

		<view
			class="tn-info__container tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-between tn-margin-left tn-margin-right ">
			<block v-for="(item, index) in list" :key="index">
				<view
					class="tn-info__item tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between tn-color-white tn-shadow-blur "
					:style="'background-color:'+ item.color +';'" @click="onItem(item)">
					<view class="tn-info__item__left tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-left">

						<view class="tn-info__item__left__content">
							<view class="tn-info__item__left__content--title tn-text-bold"
								style="font-size: 38rpx;">{{ item.title }}</view>
							<view class="tn-info__item__left__content--data tn-padding-top-xs">
								{{item.value}}
								<text class="tn-icon-right tn-padding-left-xs"></text>
							</view>
						</view>
					</view>
				<!-- 	<view class="tn-info__item__right">
						<view class="tn-info__item__right--icon">
							<view :class="[`tn-icon-image-text-fill`]"></view>
						</view>
					</view> -->
					<view class="tn-info__item__bottom">
						<view class='name tn-text-sm tn-color-gray' style="margin-left: -10rpx;">
							<text class="tn-icon-code tn-padding-right-xs" style="opacity: 0;"></text>
						</view>
					</view>
				</view>
			</block>
		</view>

	</view>
</template>

<script>
	export default {
		mounted() {

		},
		data() {
			return {
				list: [{
						title: '科技政策咨询',
						icon: 'image-text-fill',
						color: '#F33F5A',
						value: '前往咨询',
						url: "/subcontract/submit/technology"
					},
					{
						title: '数字化转型服务',
						icon: 'data-fill',
						color: '#FFC32E',
						value: '前往咨询',
						url: "/subcontract/submit/policy"
					},
				]
			}
		},
		methods: {

			onItem(item) {
				uni.navigateTo({
					url: item.url,
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tn-info {

		&__container {
			margin-top: 10rpx;
			margin-bottom: 50rpx;
		}

		&__item {
			width: 47.7%;
			margin: 15rpx 0rpx 30rpx 0rpx;
			padding: 40rpx 30rpx;
			border-radius: 10rpx;


			position: relative;
			z-index: 1;

			&::after {
				content: " ";
				position: absolute;
				z-index: -1;
				width: 100%;
				height: 100%;
				left: 0;
				bottom: 0;
				border-radius: inherit;
				opacity: 1;
				transform: scale(1, 1);
				background-size: 100% 100%;
				background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/2.png);
			}

			&__left {

				&--icon {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					font-size: 40rpx;
					margin-right: 20rpx;
					position: relative;
					z-index: 1;

					&::after {
						content: " ";
						position: absolute;
						z-index: -1;
						width: 100%;
						height: 100%;
						left: 0;
						bottom: 0;
						border-radius: inherit;
						opacity: 1;
						transform: scale(1, 1);
						background-size: 100% 100%;
						background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg5.png);
					}
				}

				&__content {
					font-size: 25rpx;

					&--data {
						color: rgba(255, 255, 255, 0.5);
						margin-top: 5rpx;
						// font-weight: bold;
					}
				}
			}

			&__right {
				&--icon {
					position: absolute;
					right: 0rpx;
					top: 50rpx;
					font-size: 100rpx;
					width: 108rpx;
					height: 108rpx;
					text-align: center;
					line-height: 60rpx;
					opacity: 0.15;
				}
			}

			&__bottom {
				box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.12);
				border-radius: 0 0 10rpx 10rpx;
				position: absolute;
				width: 85%;
				line-height: 15rpx;
				left: 50%;
				bottom: -15rpx;
				transform: translateX(-50%);
				z-index: -1;
				text-align: center;
			}
		}
	}
</style>
<!-- <template>
	<view class="">
		<view class="tn-flex tn-flex-row-between tn-margin-top" @click="tn('/circlePages/business')">
			<view class="justify-content-item tn-margin tn-text-bold tn-text-xxl">
				园区服务
			</view>
			<view class="justify-content-item tn-margin tn-text-lg tn-color-grey">
				<text class="tn-padding-xs"></text>
				<text class=""></text>
			</view>
		</view>
		<view class="tn-flex tn-margin-xs tn-padding-top-sm">
			<view v-for="(item,index) in catelist" :key="index" class="cate  tn-padding-sm tn-margin-xs tn-radius"
				@click="onNav(item)">
				<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
				
					<view
						class="icon12__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur  tn-color-purplered">
						
						<image :src="item.icon" style="width: 80rpx;height: 80rpx;"></image>
					</view>
					<view class="tn-color-black tn-text-center">
						<text class="tn-text-ellipsis tn-padding-top-xs">{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
	
	</view>

</template>

<script>
	export default{
		data(){
			return{
				catelist:[
					{
						name:"科技政策咨询",
						icon:"/static/images/policy.png",
						url:''
					},
					{
						name:"数字化转型服务",
						icon:"/static/images/data.png",
						url:''
					},
				]
			}
		}
	}
</script>

<style>
	.cate {
		width:50%;
		padding: 20rpx 0;
		text-align: center;
		margin: 20rpx 10rpx;
	}
</style> -->